<template>
  <div class="page-box">
       <div class="page-search">
           <div>
               <label>员工编号</label>
               <el-input v-model="searchForm.PersonCode" style="width: 160px;"></el-input>
           </div>
           <div>
               <label>员工姓名</label>
               <el-input v-model="searchForm.Name" style="width: 160px;"></el-input>
           </div>
            <div>
                <label>身份证</label>
               <el-input v-model="searchForm.IdCard" style="width: 160px;"></el-input>
           </div>
           <div>
               <el-button type="primary" @click="search">查询</el-button>
               <el-button @click="reset">重置</el-button>
           </div>
       </div>
       <div class="page-section">
           <div class="page-tool">
               <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
               <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
           </div>


           <!--表单-->
           <!--表单-->
           <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(100vh - 350px)">
               <el-table-column  type="selection" width="55"></el-table-column>
               <el-table-column  fixed prop="PersonCode" label="员工编号" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="Name" label="员工姓名" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="Sex" label="员工性别" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="Email" label="员工邮箱" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="Phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="PositionalTitles" label="职位" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column   label="操作" :show-overflow-tooltip="true">
                   <template slot-scope="scope">
                       <el-button type="text" @click="update(scope.row)">编辑</el-button>
                       <el-button type="text" @click="del(scope.row)">删除</el-button>
                   </template>
               </el-table-column>
           </el-table>
   

           <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
       </div>

       <!--弹窗-->
       <el-dialog  :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="60%" @close="closeDialog">
          <EmployeesInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible"/>
       </el-dialog>

  </div>
</template>
<script>
//es6 对象名
import EmployeesInput from './components/EmployeesInput.vue';
import Pagination from '@/components/Pagination.vue';
export default{
   components:{
    EmployeesInput,
       Pagination
   },
   mounted(){
       this.dataBind();
   },
   data(){
       return{

           //搜索字段
           searchForm:{
            PersonCode:'',
            Name:'',
            IdCard:''
           },


           //对话框对象
           dialogDomain:{
               title:'新增员工',
               dialogVisible:false
           },


           isUpdate:false,
           //数据模型
           model:{
            PersonCode:'',
            Name:'',
            Sex:'',
            IdCard:'',
            Email:'',
            Nation:'',
            Phone:'',
            Political:'', 
            NativePlace:'',
            Height:'',
            Weight:'',
            Health:'',
            IdCard:'',
            Education:'',
            School:'',
            Major:'',
            Address:'',
            ZipCode:'',
            Email:'',
            Phone:'',
            ForeignLanguage:'',
            ForeignLanguageLevel:'',
            ComputerLevel:'',
            GraduationTime:'',
            ArrivalTime:'',
            PositionalTitles:'',
            EducationExperience:'',
            WorkExperience:''

           },

           pageDomain:{
               PageIndex:1,
               PageSize:10,
               TotalCount:0
           },
           tableData:[],
           isLoading:false,
  

       }
   },
   methods:{
       add(){
           this.dialogDomain.title="新增员工";
           this.dialogDomain.dialogVisible=true;
           this.isUpdate=false;
       },
       update(model){
           this.dialogDomain.title="编辑员工";
           this.dialogDomain.dialogVisible=true;
           this.isUpdate=true;

           console.log(model);
           this.model = model;
       },

       //批量删除
       dels(){
           if(this.$refs.dataForm.selection.length<=0){
               this.showNotify('请先选择一项')
               return;
           }
           this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
           })
           .then(() => {
               
               //获取选中的表格数据 并筛选id
               var ids =this.$refs.dataForm.selection.map(x=>x.Id)

               //拼接参数
               let params =  new URLSearchParams();
               params.append('ids',ids.join(','))

               this.$http.delete('/api/Employees/DelAll',{
                   data:params,
                   headers:{
                       'content-Type': 'application/x-www-form-urlencoded'
                   },
                   loading:this.$loading()
               })
               .then((res)=>{
                   this.showNotify('操作成功','success');
                   this.dataBind();
               })
           }).catch(()=>{});     
           
       },

       //删除单条
       del(model){
           this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
           })
           .then(() => {
               this.$http.delete('/api/Employees',{
                   data:{
                       id:model.Id
                   },
                   headers:{
                       'content-Type': 'application/x-www-form-urlencoded'
                   }
               })
               .then((res)=>{
                   this.showNotify('操作成功','success');
                   this.dataBind();
               })
           }).catch(()=>{});  
       },



       //对话框关闭事件
       closeDialog(){
           this.model={
            PersonCode:'',
            Name:'',
            Sex:'',
            IdCard:'',
            Email:'',
            Nation:'',
            Phone:'',
            Political:'', 
            NativePlace:'',
            Height:'',
            Weight:'',
            Health:'',
            IdCard:'',
            Education:'',
            School:'',
            Major:'',
            Address:'',
            ZipCode:'',
            Email:'',
            Phone:'',
            ForeignLanguage:'',
            ForeignLanguageLevel:'',
            ComputerLevel:'',
            GraduationTime:'',
            ArrivalTime:'',
            PositionalTitles:'',
            EducationExperience:'',
            WorkExperience:''
           }
       },


       search(){
           this.pageDomain.PageIndex=1;
           this.dataBind();
       },
       reset(){
           this.searchForm.ProcessCode='';
           this.searchForm.ProcessName='';
           this.searchForm.EnableFlag='';
       },
       //新增或编辑页面回调
       callback(){
           let actionName = this.isUpdate?'编辑':'新增';
           this.showNotify(actionName+'员工成功','success');
           this.dialogDomain.dialogVisible=false;
           this.dataBind();
       },

       
       //分页方法
       handleSizeChange(val){
           this.pageDomain.PageIndex = 1;
           this.pageDomain.PageSize = val;
           this.dataBind();
       },
       handleCurrentChange(val){
           this.pageDomain.PageIndex = val;
           this.dataBind();
       },


       //获取数据
       dataBind(){
           this.isLoading=true;
           this.$http.get('/api/Employees',
           {
              params:{
                   PageIndex:this.pageDomain.PageIndex,
                   PageSize:this.pageDomain.PageSize,
                   PersonCode:this.searchForm.PersonCode,
                   Name:this.searchForm.Name,
                   IdCard:this.searchForm.IdCard
              }
           })
           .then(res=>{
               this.tableData=res.Data;
               this.pageDomain.TotalCount = res.Count;
               this.isLoading=false;
           })
       }
   }
}
</script>

<style scoped>
   
</style>
